<template>
	<view class="root">
		<view class="header" v-if="show_header">
			<view class="status">
				<label class="status-text">
					等待{{ userInfo.identity ? "乘客拼车" : "车主接单" }}...
				</label>
				<view
					@click="operation"
					hover-class="tap-hover"
					hover-stay-time="100"
					class="more"
				>
					<text v-for="n in 3" :key="n" />
				</view>
			</view>
			<text class="routes">{{ orderHall.routes }}</text>
			<view class="info">
				<label
					v-for="item in [
						{ icon: 'times', text: orderHall.time },
						{
							icon: 'people',
							text: orderHall.numberOfPeople + '人',
						},
						{ icon: 'remarks', text: orderHall.remarks },
					]"
					:key="item.icon"
				>
					<block v-if="item.text">
						<image :src="`/static/images/icon-${item.icon}.png`" />
						<text class="ellipsis">
							{{ item.text }}
						</text>
					</block>
				</label>
			</view>
		</view>

		<view class="main">
			<label class="tips">{{ tips }}</label>
			<scroll-view scroll-y class="recommends">
				<view>
					<view
						v-for="(travel, index) in orderHall.recommends"
						:key="index"
						class="travel"
					>
						<view class="driver-info">
							<image
								class="avatar"
								mode="aspectFill"
								:src="travel.avatarUrl"
							/>
							<view class="info">
								<label>
									<text class="time">{{ travel.time }}</text>
									<text
										v-if="travel.probability"
										class="probability"
									>
										{{ travel.probability }}
									</text>
								</label>

								<label>
									<label v-if="travel.level" class="level">
										{{ travel.level }}
									</label>
									<text
										v-if="travel.attest || travel.nickName"
										class="attest"
									>
										{{ travel.attest || travel.nickName }}
									</text>
								</label>
							</view>

							<image
								@click="callPhone(travel.phoneNumber)"
								class="icon-callPhone_green"
								src="/static/images/icon-callPhone_green.png"
							/>
						</view>

						<view class="travel-info">
							<label class="site green">
								出发地：{{ travel.startPoint }}
							</label>
							<label class="site blue">
								目的地：{{ travel.destination }}
							</label>
							<label
								v-if="travel.teammate || travel.times"
								class="explain grey"
							>
								已有{{ travel.teammate }}拼友 · 本路线出行{{
									travel.times
								}}次
							</label>

							<label
								v-if="travel.numberOfPeople"
								class="explain grey"
							>
								共有 {{ travel.numberOfPeople }} 位乘客
							</label>
						</view>
						<view class="foot">
							<text v-if="!travel.status" class="status">
								正在寻找顺路{{
									userInfo.identity ? "司机" : "乘客"
								}}...
							</text>
							<button
								v-if="userInfo.identity"
								@click="quickWay(travel.id)"
								hover-class="tap-hover"
								class="btn-start"
								:disabled="Boolean(+travel.status)"
							>
								{{ Number(travel.status) ? "已" : "" }}接单
							</button>
						</view>
					</view>

					<text
						v-if="!orderHall.recommends.length"
						class="placeholder-text"
					>
						暂无推荐数据
					</text>
				</view>
				<view class="placeholder" />
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts">
	import { UserInfo, OrderHall as OrderHallInterface } from "@/common/api";
	import { Storage } from "@/libs/utils";
	import Vue from "vue";
	import Component from "vue-class-component";

	let [flag, timers]: [boolean, number[]] = [false, []];
	@Component
	export default class OrderHall extends Vue {
		userInfo: UserInfo = Storage.get("userInfo");
		orderHall: OrderHallInterface = {
			routes: "",
			time: "",
			expected: "",
			numberOfPeople: 0,
			alreadyNum: 0,
			remarks: "",
			recommends: [],
		};
		show_header: boolean = true;

		order_id: number = 0;

		tips: string = "--";

		private onLoad({
			order_id,
			show_header = 1,
		}: {
			order_id: string;
			show_header: number;
		}): void {
			this.order_id = +order_id;
			this.show_header = !!+show_header;
		}

		private onShow(): void {
			flag = false;
			this.getData();

			uni.setNavigationBarTitle({
				title: this.userInfo.identity ? "等待拼车" : "等待接单",
			});
		}

		private onHide(): void {
			this.clearTimer();
		}
		private onUnload(): void {
			this.clearTimer();
		}

		public getData(): void {
			const { userInfo, request } = this;

			request
				.get(
					`/api/${
						userInfo.identity ? "sijiWaitPinV2" : "wait_jiedan"
					}?id=${this.order_id}`
				)
				.then(({ data }: any) => {
					if (flag) return;

					this.orderHall = data;
					this.tips = this.userInfo.identity
						? `已有${data.alreadyNum}位乘客拼车，还差${
								data.numberOfPeople - (data.alreadyNum || 0)
						  }人`
						: `车主平均接单时间约${data.expected}请耐心等待`;

					if (!this.userInfo.identity && data.isReceive) {
						uni.redirectTo({
							url: `/pages/travel?status=2&order_id=${this.order_id}`,
						});
						return;
					}

					if (data.alreadyNum === data.numberOfPeople) return;

					timers.push(setTimeout(this.getData, 3000));
				});
		}

		public clearTimer(): void {
			flag = true;
			timers.forEach((timer) => clearTimeout(timer));
		}

		public quickWay(option_id: number): void {
			this.request
				.get("/api/pinHandle", {
					jiaoche_id: this.userInfo.identity ? option_id : this.order_id,
					chuche_id: this.userInfo.identity ? this.order_id : option_id,
					type: (this.userInfo.identity as number) + 1,
				})
				.then((res) => {
					uni.showToast({
						title: `${this.userInfo.identity ? "接单" : "拼车"}成功`,
						mask: true,
						duration: 1200,
						success: () => {
							if (!this.userInfo.identity) {
								setTimeout(
									() =>
										uni.redirectTo({
											url: `/pages/travel?status=2&order_id=${this.order_id}`,
										}),
									1200
								);

								return;
							}

							this.getData();
						},
					});
				});
		}

		public async operation(): Promise<void> {
			const [fail, success]: any = await uni.showActionSheet({
				itemList: this.userInfo.identity
					? ["取消订单", "立即发车"]
					: ["取消行程"],
			});

			if (fail) return;

			switch (success.tapIndex) {
				case 0:
					this.request
						.get("/api/cancelOrder", {
							id: this.order_id,
							type: this.userInfo.identity,
						})
						.then((res) =>
							uni.showToast({
								title: "本次行程已取消",
								success: () => setTimeout(uni.navigateBack, 1500),
							})
						);
					break;
				case 1:
					this.userInfo.identity &&
						this.request
							.get(`/api/chucheDeal?id=${this.order_id}&status=1`)
							.then(({ data }) => {
								const status: AnyObject = {
									1: 1,
									3: 5,
								};
								uni.redirectTo({
									url: `/pages/travel?status=${
										status[data.status]
									}&order_id=${this.order_id}`,
								});
							});
					break;
				default:
					break;
			}
		}
		public callPhone(phoneNumber: string): void {
			uni.makePhoneCall({ phoneNumber });
		}
	}
</script>

<style >
	page {
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.root {
		height: 100%;
		.header {
			padding: 30rpx;
			border-bottom: 10rpx solid #eee;
			.status {
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.status-text {
					color: #5487e5;
					font-size: 40rpx;
					&::before {
						content: "";
						width: 18rpx;
						height: 18rpx;
						margin-right: 18rpx;
						background-color: #5487e5;
						border-radius: 50%;
					}
				}
				.more {
					flex-direction: row;
					align-items: center;
					padding: 18rpx;
					text {
						width: 9rpx;
						height: 9rpx;
						border-radius: 50%;
						margin: 5rpx;
						background-color: #000;
					}
				}
			}
			.routes {
				margin-top: 30rpx;
				color: #666;
				font-size: 30rpx;
			}
			.info {
				margin-top: 18rpx;
				flex-direction: row;
				align-items: center;
				overflow: hidden;
				label {
					flex: 1;
					justify-content: center;
					overflow: hidden;
					image {
						width: 21rpx;
						height: 21rpx;
						margin-right: 7rpx;
					}
					text {
						color: #999;
						font-size: 20rpx;
					}
				}
			}
		}
		.main {
			flex: 1;
			overflow: hidden;
			.tips {
				font-size: 26rpx;
				color: #333;
				padding: 30rpx 0;
				justify-content: center;
				.blue {
					color: #5487e5;
				}
			}
			.recommends {
				flex: 1;
				overflow: hidden;
				.travel {
					margin: 20rpx 30rpx 0;
					padding: 30rpx;
					box-shadow: 0 0 7rpx 0 rgba(35, 24, 21, 0.2);
					border-radius: 10rpx;
					.driver-info {
						flex-direction: row;
						align-items: center;
						.avatar {
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
						}
						.info {
							flex: 1;
							margin: 0 16rpx;
							.time {
								font-size: 30rpx;
								color: #1b1b1b;
							}
							.probability {
								margin-left: 25rpx;
								color: #5487e5;
								font-size: 26rpx;
							}
							.level {
								background-color: #005982;
								border-radius: 6rpx;
								color: #fff;
								font-size: 20rpx;
								padding: 4rpx 10rpx;
							}
							.attest {
								font-size: 20rpx;
								color: #999;
								margin-left: 11rpx;
							}
						}
						.icon-callPhone_green {
							width: 66rpx;
							height: 66rpx;
						}
					}
					.travel-info {
						margin-top: 30rpx;
						.site,
						.explain {
							padding: 10rpx;
							&::before {
								content: "";
								width: 10rpx;
								height: 10rpx;
								border-radius: 50%;
								margin-right: 18rpx;
							}
							&.green::before {
								background-color: #17ad82;
							}
							&.blue::before {
								background-color: #5487e5;
							}
							&.grey::before {
								background-color: #b5b5b5;
							}
						}
						.site {
							color: #666;
							font-size: 28rpx;
						}
						.explain {
							font-size: 24rpx;
							color: #999;
						}
					}
					.foot {
						margin-top: 30rpx;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						.status {
							font-size: 26rpx;
							color: #1b1b1b;
							flex: 1;
						}
						.btn-start {
							margin: 0;
							background-color: #5487e5;
							color: #fff;
							font-size: 26rpx;
							line-height: 2;
						}
					}
				}
				.placeholder-text {
					line-height: 8;
					color: #666;
					font-size: 32rpx;
					text-align: center;
				}
				.placeholder {
					height: 44px;
				}
			}
		}
	}
</style>
